<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:ez="http://java.sun.com/jsf/composite/ezcomp"> 
    <!--
    Author Lu Xiaodi
    -->
    <h:head> 
        <title>IOTR</title> 

        <style type="text/css"> 
            .gritter-notice-wrapper { 
                left:200px; 
                top:50px; 
            } 
        </style> 

    </h:head> 
    <h:body>                 
        <ez:OutletManagerIOTRHeaderMenu/>

        <ez:OutletManagerIOTRTitle/>

        <ez:OutletManagerIOTRMenu/>

        <p:layout style="table-layout:auto; height:600px ">
            <p:layoutUnit position="left" header="Navigation" width="300">
                <ez:OutletManagerIOTRRMMenu/>
            </p:layoutUnit>
            <p:layoutUnit position="center" header="Settings" scrollable="true">

                <h:form id="customerEmail">
                    <h:panelGrid columns="4">
                        <h:outputLabel value="Enter Date: " />
                        <p:inputMask id="date" mask="99/99/9999" 
                                     value="#{reservationManagedBean.dateStr}"/>
                        <p:message for="date"/>
                        <p:commandButton id="dateSubmit" value="Submit" ajax="false"
                                         update="reservationList" />
                    </h:panelGrid>
                    <!--                </h:form>
                                    <h:form>-->

                    <p:dataTable var="reservation" value="#{reservationManagedBean.reservationByDate}" 
                                 id="reservationList">
                        <f:facet name="header" >
                            <h:outputText value="#{reservationManagedBean.dateStr}"/>
                        </f:facet>
                        <p:column headerText="Id" style="width:10%">
                            <h:outputText value="#{reservation.id}"/>
                        </p:column>
                        <p:column headerText="Time" style="width:20%" sortBy="#{reservation.timeslot.time}">
                            <h:outputText value="#{reservation.timeslot.time}"/>
                        </p:column>
                        <p:column headerText="Area" style="width:8%" >
                            <h:outputText value="#{reservation.area.areaName}"/>
                        </p:column>
                        <p:column headerText="Comment" style="width:150px">
                            <h:outputText id="comment" value="#{reservation.comments}"/>
                        </p:column>
                        <p:column headerText="Status" style="width:8%">
                            <h:outputText id="status" value="#{reservation.statusStr}"/>
                        </p:column>

                        <p:column headerText="Option" style="width:8%">
                            <p:commandButton value="Confirm" ajax="true" 
                                             actionListener="#{reservationManagedBean.confirmOneReservation}" 
                                             update="customerEmail:reservationList" 
                                             disabled="#{reservation.confirmStatus}"> 
                                <f:attribute name="rId" value="#{reservation.id}" />
                            </p:commandButton> 
                        </p:column>

                    </p:dataTable>  
                </h:form>
            </p:layoutUnit>
        </p:layout>
    </h:body> 
</html>